<template>
    <div class="app-container">
        <a-card class="box-card" :cardOpen="true">
            <div slot="header">
                <span>事件信息</span>
            </div>
            <div slot="header-toolbtn">
                <el-button type="primary" size="mini" icon="el-icon-back" @click="handleReback">返回救援计划列表 </el-button>
            </div>
            <HandleEventInfo ref="eventInfoRef" :event="eventInfo" />
        </a-card>
        <a-card class="box-card" v-if="logs.length > 0" :style="{ marginTop: '15px' }" :cardOpen="true">
            <div slot="header">
                <span>过程回看1</span>
                <span class="play-time" v-if="playStatus != 0">当前任务时间:{{ playTimeFormat }}</span>
            </div>
            <div slot="header-toolbtn">
                <template v-if="playStatus == 0">
                    <el-button type="primary" size="mini" icon="el-icon-video-play" @click="handleStartPlayBack">开始回看</el-button>
                </template>
                <template v-if="playStatus == 1">
                    <el-button type="warning" size="mini" icon="el-icon-video-pause" @click="handlePausePlayBack">暂停回看</el-button>
                </template>
                <template v-if="playStatus == 2">
                    <el-button type="primary" size="mini" icon="el-icon-video-play" @click="handleStartPlayBack">继续回看</el-button>
                </template>
                <el-button type="warning" size="mini" icon="el-icon-printer" @click="handleExportLog">导出救援工作记录</el-button>
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="feed-container">
                        <div class="feed-list" ref="feedList">
                            <ul>
                                <li v-for="i in playLogs">
                                    <div class="feed-item">[{{ i.createTime }}] {{ i.content }}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="feed-container">
                        <div class="feed-list" ref="msgList">
                            <ul>
                                <li v-for="i in playMsgLogs">
                                    <div class="feed-item">
                                        [{{ i.msgTime }}] <span class="msg-sender">{{ i.userName }}：</span> {{ i.msgContent }}
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </a-card>
    </div>
</template>
<script>
import ACard from "@/views/components/a-card/card.vue";
import { getHandleBaseInfo } from "@/api/response/handle.js";
import { getInfoByHandleId as getHandleInfoByHandleId, exportHandleLogs } from "@/api/response/handleInfo";
import { getPlanEventInfo } from "@/api/rescue/rescue";
import { getAllHandleLogs } from "@/api/response/log";
import HandleEventInfo from "./module/HandleEventInfo.vue";
import { getAllGroupMsg } from "@/api/chat/im.js";

export default {
    name: "HandlePlayBack",
    components: { ACard, HandleEventInfo },
    dicts: ["usetypecode_dict", "eventlevelcode_dict", "info_report_channel", "sys_dept_type_dict"],
    props: [],
    data() {
        return {
            handleId: 0,
            hdInfoId: 0,
            handleInfoTitle: "",
            dutyInfo: null,
            eventInfo: {},
            playStatus: 0,
            logs: [],
            msgLogs: [],
            timer: null,
            playTime: 0,
            playLogs: [],
            playMsgLogs: [],
        };
    },
    computed: {
        playTimeFormat() {
            const moment = require("moment");
            return moment(this.playTime * 1000).format("YYYY-MM-DD HH:mm:ss");
        },
    },
    watch: {},
    created() {},
    mounted() {
        this.handleId = this.$route.query.handleId;
        this.getHandleInfo();
    },
    methods: {
        getHandleInfo() {
            // 获取处置的基本信息
            getHandleInfoByHandleId(this.handleId).then(hdInfo => {
                this.handleInfoTitle = hdInfo.data.name;
                if (hdInfo.data.infoId) {
                    getPlanEventInfo(hdInfo.data.infoId).then(res => {
                        this.eventInfo = res.data;
                    });
                }
            });
            const moment = require("moment");
            getHandleBaseInfo(this.handleId).then(res => {
                let data = res.data;
                this.playTime = moment(data.startTime, "YYYY-MM-DD HH:mm:ss").unix();
                this.getHandleLogs();
                this.getHandleMessages();
            });
        },
        getHandleLogs() {
            getAllHandleLogs(this.handleId).then(res => {
                this.logs = res.data;
            });
        },
        getHandleMessages() {
            getAllGroupMsg("handle", this.handleId).then(res => {
                this.msgLogs = res.data;
            });
        },
        handleDrillDetail() {
            this.$tab.openPage("事件详情", "/guard/event/detail", { infoId: this.dutyInfo.infoId });
        },
        handleStartPlayBack() {
            this.playStatus = 1;
            this.timer = setInterval(() => {
                this.playTime += 60;
                this.showLog();
            }, 1000);
        },
        showLog() {
            const moment = require("moment");
            let index = this.playLogs.length;
            for (var i = index; i < this.logs.length; i++) {
                let time = moment(this.logs[i].createTime, "YYYY-MM-DD HH:mm:ss").unix();
                if (time < this.playTime) {
                    // 显示到列表
                    this.playLogs.push(this.logs[i]);
                }
            }
            this.$nextTick(() => {
                this.$refs.feedList.scrollTop = this.$refs.feedList.scrollHeight;
            });
            // 显示聊天日志
            let mIndex = this.playMsgLogs.length;
            for (var i = mIndex; i < this.msgLogs.length; i++) {
                let time = moment(this.msgLogs[i].msgTime, "YYYY-MM-DD HH:mm:ss").unix();
                if (time < this.playTime) {
                    // 显示到列表
                    this.playMsgLogs.push(this.msgLogs[i]);
                }
            }
            this.$nextTick(() => {
                this.$refs.msgList.scrollTop = this.$refs.msgList.scrollHeight;
            });
            if (this.playLogs.length == this.logs.length) {
                // 显示完了，停止
                this.handleStopPlayBack();
            }
        },
        handlePausePlayBack() {
            this.playStatus = 2;
            clearInterval(this.timer);
        },
        handleStopPlayBack() {
            this.playStatus = 0;
            clearInterval(this.timer);
        },
        handleReback() {
            // 关闭当前标签页，打开新标签页
            this.$tab.closePage().then(res => {
                this.$tab.openPage("救援计划", "/response/handleList", {});
            });
        },
        handleExportLog() {
            const fileName = `${this.handleInfoTitle}-救援工作内容.docx`;
            this.download("/hd/HandleInfo/export/" + this.handleId, {}, fileName);
        },
    },
};
</script>
<style lang="scss" scoped>
.feed-container {
    background: #0b133c;
    color: white;
    border-radius: 10px;
    padding: 15px;

    .feed-list {
        overflow-y: scroll;
        height: 300px;

        // 设置滚动条宽度
        &::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
            background: rgba(10, 122, 227, 0.01);
        }

        //滚动条的哈滑块
        &::-webkit-scrollbar-thumb {
            background: #2e6190;
            border-radius: 3px;
        }

        .feed-item {
            font-size: 12px;
            line-height: 25px;
            .msg-sender {
                color: var(--el-color-primary);
            }
        }
    }
}

.play-time {
    margin-left: 20px;
    font-size: 12px;
}

ul,
li {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}
</style>
